<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex zulindetail_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between zulindetail_fd0_0'>
          <view class='flex flex-wrap align-center zulindetail_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  zulindetail_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-center'>
            <text class='zulindetail_fd0_0_c1_c0'>租赁详情</text>
          </view>
          <view class='flex align-center justify-end zulindetail_fd0_0_c2'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---订单flex布局开始-->
      <view class="flex flex-direction align-stretch benben-flex-layout zulindetail_flex_1">
        <view class='flex align-center zulindetail_fd1_0'>
          <view class='flex flex-direction flex-wrap align-stretch flex-sub'>
            <text class='zulindetail_fd1_0_c0_c0' v-if="dataDetails.stateNum=='0'">租赁中</text><text
              class='zulindetail_fd1_0_c0_c0' v-if=" dataDetails.stateNum=='36'">{{$t('待归还')}}</text><text
              class='zulindetail_fd1_0_c0_c0' v-if=" dataDetails.stateNum=='37'">{{$t('待退款')}}</text><text
              class='zulindetail_fd1_0_c0_c0' v-if=" dataDetails.stateNum=='40'">{{$t('已完成')}}</text>
            <text class='zulindetail_fd1_0_c0_c0' v-if=" dataDetails.stateNum=='42'">{{$t('已完成')}}</text>
          </view>
          <image class='zulindetail_fd1_0_c1' mode=" aspectFit" :src='STATIC_URL+"516.png"'
            v-if="dataDetails.stateNum=='0' && dataDetails.pay_type!='offline_pay'"></image>
          <image class='zulindetail_fd1_0_c1_1' mode="aspectFit" :src='STATIC_URL+"291.png"'
            v-if="dataDetails.stateNum=='36'"></image>
          <image class='zulindetail_fd1_0_c1_1' mode="aspectFit" :src='STATIC_URL+"292.png"'
            v-if="dataDetails.stateNum=='40'"></image>
          <image class='zulindetail_fd1_0_c1_1' mode="aspectFit" :src='STATIC_URL+"293.png"'
            v-if="dataDetails.stateNum=='42'"></image>
          <image class='zulindetail_fd1_0_c1_1' mode="aspectFit" :src='STATIC_URL+"294.png"'
            v-if="dataDetails.stateNum=='4'"></image>
          <image class='zulindetail_fd1_0_c1_1' mode="aspectFit" :src='STATIC_URL+"290.png"'
            v-if="dataDetails.stateNum=='7'"></image>
        </view>
        <view class='flex flex-wrap align-center zulindetail_fd1_1'>
          <image class='zulindetail_fd1_1_c0' mode="aspectFit" :src='STATIC_URL+"139.png"'></image>
          <view class='flex flex-direction flex-wrap align-stretch flex-sub zulindetail_fd1_1_c1'>
            <view class='flex align-center'>
              <text class='zulindetail_fd1_1_c1_c0_c0'>{{userAdress.consignee}}</text>
              <text class='zulindetail_fd1_1_c1_c0_c1'>(</text>
              <text class='zulindetail_fd1_1_c1_c0_c1' v-if="userAdress.menOrW=='0'">{{$t('先生')}}</text><text
                class='zulindetail_fd1_1_c1_c0_c1' v-if=" userAdress.menOrW=='1'">{{$t('女士')}}</text>
              <text class='zulindetail_fd1_1_c1_c0_c1'>)</text>
              <text class='flex-sub zulindetail_fd1_1_c1_c0_c4'>{{userAdress.phone}}</text>
            </view>
            <view class='flex flex-wrap align-center zulindetail_fd1_1_c1_c1'>
              <view class='flex-sub zulindetail_fd1_1_c1_c1_c0'>
                <text class='zulindetail_fd1_1_c1_c1_c0_c0'>{{userAdress.province}}</text>
                <text class='zulindetail_fd1_1_c1_c1_c0_c0'>{{userAdress.city}}</text>
                <text class='zulindetail_fd1_1_c1_c1_c0_c0'>{{userAdress.country}}</text>
                <text class='zulindetail_fd1_1_c1_c1_c0_c3'>{{userAdress.address}}</text>
              </view>
            </view>
          </view>
          <image class='zulindetail_fd1_1_c2' mode="aspectFit" :src='STATIC_URL+"466.png"'></image>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch zulindetail_fd1_2'>
          <template v-for='(item,key0) in dataDetails.orderRecItems'>
            <view class='flex flex-direction align-stretch zulindetail_fd1_2_c0' :key='key0'>
              <view class='flex flex-wrap align-center'>
                <image class='zulindetail_fd1_2_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"514.png"'></image>
                <text class='zulindetail_fd1_2_c0_c0_c1'>{{dataDetails.shopName}}</text>
                <text class='fu-iconfont2  zulindetail_fd1_2_c0_c0_c2'>&#xe7f2;</text>
              </view>
              <view class='flex align-stretch zulindetail_fd1_2_c0_c1' @tap="handleJumpDiy" data-type="navigateTo"
                :data-url="`/pages/fl/shopDetail/shopDetail?id=${item.comdIdk}`">
                <image class='zulindetail_fd1_2_c0_c1_c0' mode="aspectFill" :src='item.coverPic'></image>
                <view class='flex flex-direction align-stretch flex-sub zulindetail_fd1_2_c0_c1_c1'>
                  <text class='zulindetail_fd1_2_c0_c1_c1_c0'>{{item.comdName}}</text>
                  <text class='zulindetail_fd1_2_c0_c1_c1_c1'>{{item.comPropItemNames}}</text>
                  <view class='flex flex-wrap align-center justify-center zulindetail_fd1_2_c0_c1_c1_c2'>
                    <text class="text-sm">剩余时长：</text>
                    <!-- <text>0月0天0小时0分</text> -->
                    <benben-countdown class='offerPay_fd1_1_c1' :show-day='true'
                      :count-time="dataDetails.leaCloseSecond">
                      <template #default="{ d, h, i, s }">
                        <text class="text-sm offerPay_fd1_1_c0" style="color: #327FFB;">{{d}}</text>

                        <text class="text-sm offerPay_fd1_1_c0">天</text>

                        <text class='text-sm offerPay_fd1_1_c0' style="color: #327FFB;">{{h}}</text>

                        <text class='text-sm offerPay_fd1_1_c0'>:</text>

                        <text class='text-sm offerPay_fd1_1_c0' style="color: #327FFB;">{{i}}</text>

                        <text class='text-sm offerPay_fd1_1_c0'>:</text>

                        <text class='text-sm offerPay_fd1_1_c0' style="color: #327FFB;">{{s}}</text>

                        <text class='text-sm offerPay_fd1_1_c0'></text>
                      </template>
                    </benben-countdown>
                  </view>
                </view>
              </view>
            </view>
          </template>

          <view class='flex flex-direction align-stretch justify-end zulindetail_fd1_2_c1'>
            <view class='flex flex-wrap align-center padding-bottom-sm zulindetail_fd1_2_c1_c0'>
              <text class='zulindetail_fd1_2_c1_c0_c0'>租赁信息</text>
            </view>
            <view class='flex flex-wrap align-center zulindetail_fd1_2_c0_c1'>
              <text class='zulindetail_fd1_2_c1_c1_c0'>设备编号</text>
              <text class='zulindetail_fd1_2_c1_c1_c1'>{{orderRecItems.comdFacCore}}</text>
            </view>
            <view class='flex flex-wrap align-center zulindetail_fd1_2_c0_c1'>
              <text class='zulindetail_fd1_2_c1_c1_c0'>所属门店</text>
              <view class='flex flex-wrap align-center'>
                <image class='zulindetail_fd1_2_c1_c2_c1_c0' mode="aspectFit" :src='STATIC_URL+"514.png"'></image>
                <text class='zulindetail_fd1_2_c1_c2_c1_c1'>{{dataDetails.shopName}}</text>
                <text class='zulindetail_fd1_2_c1_c2_c1_c2'>详情</text>
              </view>
            </view>
            <view class='flex flex-wrap align-center zulindetail_fd1_2_c0_c1'>
              <text class='zulindetail_fd1_2_c1_c1_c0'>租赁时长</text>
              <text class='zulindetail_fd1_2_c1_c1_c1'>{{orderRecItems.propItemName}}</text>
            </view>
            <view class='flex flex-wrap align-center zulindetail_fd1_2_c0_c1' @tap.stop="popupShow1709694882158=true">
              <text class='zulindetail_fd1_2_c1_c1_c0'>租赁总费用</text>
              <text class='zulindetail_fd1_2_c1_c1_c1'>￥{{dataDetails.payMoney}}</text>
              <text class='zulindetail_fd1_2_c1_c4_c2'>明细</text>
            </view>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch zulindetail_fd1_3'>
          <view class='flex flex-wrap align-center zulindetail_fd1_2_c1_c0'>

            <view class='flex  zulindetail_fd1_3_c0_c0'></view>

            <text class='zulindetail_fd1_2_c1_c0_c0'>服务</text>
          </view>
          <text class='zulindetail_fd1_3_c1'>{{orderRecItems.serIntrud}}</text>
          <view class='flex flex-wrap align-center' v-if="orderRecItems.serIntrudPic">
            <image class='zulindetail_fd1_3_c2_c0' mode="aspectFill" :src='orderRecItems.serIntrudPic'></image>
          </view>
        </view>
        <view class='flex align-center justify-between zulindetail_fd1_4'>
          <view class='zulindetail_fd1_4_c0' @tap.stop="chooseMore">
            更多
            <view class="cancel-box" v-if="isMore">
              <view class="cancel-item" v-if="isMore" @tap.stop="handleJumpDiy" data-type="navigateTo"
                :data-url="`/pages/ddgl/faultdispatch/faultdispatch?order_sn=${dataDetails.id}&comdFacCore=${orderRecItems.comdFacCore}`">
                故障报修</view>
              <view class='cancel-item' @tap.stop="handleJumpDiy" data-type="navigateTo"
                :data-url="`/pages/ddgl/wantreturn/wantreturn?order_sn=${order_sn}&type=${dataDetails.stateNum}`"
                v-if="dataDetails.stateNum==35">提前归还</view>
            </view>

          </view>
          <view class="flex align-center justify-end">
            <button class='zulindetail_fd1_4_c1' @tap.stop="handleJumpDiy" data-type="navigateTo"
              :data-url="`/pages/sy/questionnaire/devicedetails?order_sn=${dataDetails.id}&comdFacCore=${dataDetails.comdFacCore}`">设备详情</button>
            <button @tap.stop="openpop(orderRecItems)" class='zulindetail_fd1_4_c2'
              v-if="dataDetails.stateNum==35">续租</button>
            <button class='zulindetail_fd1_4_c1' @tap.stop="handleJumpDiy" data-type="navigateTo"
              :data-url="`/pages/ddgl/wantreturn/wantreturn?order_sn=${order_sn}&type=${dataDetails.stateNum}`"
              v-if="dataDetails.stateNum==36">归还</button>
            <button @tap.stop="popopen(orderRecItems)" class='zulindetail_fd1_4_c2'
              v-if="dataDetails.stateNum==35|| dataDetails.stateNum==36">买下</button>
          </view>

        </view>
      </view>

      <!---订单flex布局结束-->
      <benben-popup v-model="popupShow1709694882158" :mask="true" :mask-close-able="false" mode='bottom' :z-index='999'>
        <!---运费说明弹窗flex布局开始-->
        <view class="flex flex-direction align-stretch benben-flex-layout zulindetail_flex_2">
          <view class='flex flex-wrap align-center justify-between zulindetail_fd2_0'>
            <view class='flex flex-wrap align-center zulindetail_fd2_0_c0'>
            </view>
            <view class='flex flex-wrap align-center justify-center zulindetail_fd2_0_c1'
              @click.stop="popupShow1709694882158=false">
              <image class='zulindetail_fd2_0_c1_c0' mode="aspectFit" :src='STATIC_URL+"481.png"'></image>
              <text class='zulindetail_fd2_0_c1_c1'>费用明细</text>
              <image class='zulindetail_fd2_0_c1_c0' mode="aspectFit" :src='STATIC_URL+"480.png"'></image>
            </view>
            <image class='zulindetail_fd2_0_c2' mode="aspectFit" :src='STATIC_URL+"129.png"'
              @tap.stop="popupShow1709694882158=false"></image>
          </view>
          <view class='flex flex-direction align-stretch'>
            <view class='flex flex-wrap align-center zulindetail_fd2_1_c0'>
              <text class='zulindetail_fd2_1_c0_c0'>租赁单价</text>
              <text class='zulindetail_fd2_1_c0_c1'>￥{{orderRecItems.rentMoney || 0}}/月</text>
            </view>
            <view class='flex flex-wrap align-center zulindetail_fd2_1_c0'>
              <text class='zulindetail_fd2_1_c0_c0'>租赁</text>
              <text class='zulindetail_fd2_1_c0_c1'>{{orderRecItems.propItemName}}</text>
            </view>
            <view class='flex flex-wrap align-center zulindetail_fd2_1_c0'>
              <text class='zulindetail_fd2_1_c0_c0'>租赁费</text>
              <text class='zulindetail_fd2_1_c0_c1'>￥{{orderRecItems.rentMoeny}}/月</text>
            </view>
            <view class='flex flex-wrap align-center zulindetail_fd2_1_c0'>
              <text class='zulindetail_fd2_1_c0_c0'>押金</text>
              <text class='zulindetail_fd2_1_c0_c1'>￥{{orderRecItems.cashMoeny || 0}}/月</text>
            </view>
            <view class='flex flex-wrap align-center zulindetail_fd2_1_c0'>
              <text class='zulindetail_fd2_1_c0_c0'>押金优惠券</text>
              <text class='zulindetail_fd2_1_c0_c1'>￥{{orderRecItems.couPrice || 0}}/月</text>
            </view>
            <view class='flex flex-wrap align-center zulindetail_fd2_1_c0'>
              <text class='zulindetail_fd2_1_c0_c0'>运费</text>
              <text class='zulindetail_fd2_1_c0_c1'>{{orderRecItems.isPost==1 ? '包邮' :orderRecItems.postage}}</text>
            </view>
            <view class='flex flex-wrap align-center zulindetail_fd2_1_c0'>
              <text class='zulindetail_fd2_1_c0_c0'>实付费用</text>
              <text class='zulindetail_fd2_1_c0_c1'>￥{{orderRecItems.realCashMoeny}}/月</text>
            </view>
          </view>
        </view>

        <!---运费说明弹窗flex布局结束-->

      </benben-popup>
    </view>
    <benben-popup v-model="popupShow1709706165794" :mask="true" :mask-close-able="false" mode='bottom'>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction align-stretch benben-flex-layout woyaozulin_flex_4">
        <view class='flex flex-wrap align-start'>
          <image class='woyaozulin_fd4_0_c0' mode="aspectFit" :src='popBox.coverPic'></image>
          <view class='flex flex-direction align-stretch flex-sub woyaozulin_fd4_0_c1'>
            <view class='flex align-center justify-between'>
              <view class='flex flex-wrap align-center'>
                <image class='woyaozulin_fd4_0_c1_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"500.png"'></image>
                <view class='flex align-center woyaozulin_fd4_0_c1_c0_c0_c1'>
                  <text class='woyaozulin_fd4_0_c1_c0_c0_c1_c0'>￥</text>
                  <text>{{popBox.rentMoeny}}</text>
                </view>
                <view class='flex flex-wrap align-center self-center justify-center woyaozulin_fd4_0_c1_c0_c0_c2'>
                  <text>押金¥{{popBox.cashMoeny}}</text>
                  <!-- <text class='woyaozulin_fd4_0_c1_c0_c0_c2_c1'></text> -->
                </view>
              </view>
              <image @click.stop="popupShow1709706165794=false" class='woyaozulin_fd4_0_c1_c0_c1' mode="aspectFit"
                :src='STATIC_URL+"131.png"'></image>
            </view>
            <view class='flex align-center woyaozulin_fd4_0_c1_c1'>
              <!-- <view class='flex align-center woyaozulin_fd4_0_c1_c1_c0'>
                <text>库存 </text>
                <text class='woyaozulin_fd4_0_c1_c1_c0_c1'>233</text>
              </view> -->
              <view class='flex align-center woyaozulin_fd4_0_c1_c1_c1'>
                <text>已选：</text>
                <text class='woyaozulin_fd4_0_c1_c1_c0_c1'>{{popBox.comPropItemNames}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class='flex flex-direction align-stretch woyaozulin_fd4_1'>
          <text class='woyaozulin_fd4_1_c0'>租赁</text>
          <view class='flex flex-wrap align-center woyaozulin_fd4_1_c1'>
            <view class='flex align-center justify-center woyaozulin_fd4_1_c1_c0' @click.stop="chooseLease(item)"
              :class="leaseItemId==item.id ? 'active' : ''" v-for="(item,index) in leaseItemVos" :key="index">
              {{item.propItemName}}
            </view>
          </view>
        </view>
        <view class='flex align-center justify-between woyaozulin_fd4_2'>
          <text class='woyaozulin_fd4_2_c0'>租赁数量</text>

          <benben-flex-number-box class-name='flex flex align-center' input-class="woyaozulin_numberBoxInputfd4_2_c1"
            :disabled="true" :min="1" :step="1" :opacity="0.3">
            <template #minus>
              <image class='woyaozulin_fd4_2_c1_c0' mode="aspectFit" :src='STATIC_URL+"537.png"'></image>
            </template>
            <template #plus>
              <image class='woyaozulin_fd4_2_c1_c0' mode="aspectFit" :src='STATIC_URL+"517.png"'></image>
            </template>

          </benben-flex-number-box>

        </view>
        <view class='flex flex-wrap align-center justify-between woyaozulin_fd4_3'>
          <text>租赁费用</text>
          <text>￥{{leaseItemPrice}}</text>
        </view>
        <view class='flex align-center justify-center woyaozulin_fd4_4' @click.stop="goPay">
          <view class='flex align-center justify-center woyaozulin_fd4_4_c0'>
            <text class='woyaozulin_fd4_4_c0_c0'>续费</text>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->

    </benben-popup>
    <benben-popup v-model="isgoBuy" :mask="true" :mask-close-able="false" mode='bottom'>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction align-stretch benben-flex-layout woyaozulin_flex_4">
        <view class='flex flex-wrap align-start'>
          <image class='woyaozulin_fd4_0_c0' mode="aspectFit" :src='popBox.coverPic'></image>
          <view class='flex flex-direction align-stretch flex-sub woyaozulin_fd4_0_c1'>
            <view class='flex align-center justify-between'>
              <view class='flex flex-wrap align-center'>

                <text class="text-999 text-sm margin-right-sm">买下</text>
                <view class='flex align-center woyaozulin_fd4_0_c1_c0_c0_c1'>
                  <text class='woyaozulin_fd4_0_c1_c0_c0_c1_c0'>￥</text>
                  <text>{{popBox.sumAmount}}</text>
                </view>

              </view>
              <image @click.stop="isgoBuy=false" class='woyaozulin_fd4_0_c1_c0_c1' mode="aspectFit"
                :src='STATIC_URL+"131.png"'></image>
            </view>
          </view>
        </view>
        <view class='flex flex-direction align-stretch woyaozulin_fd4_1' v-for="(item,index) in popBox.propVos"
          :key="index">
          <text class='woyaozulin_fd4_1_c0'>{{item.propName}}</text>
          <view class='flex flex-wrap align-center woyaozulin_fd4_1_c1'>
            <view class='flex align-center justify-center woyaozulin_fd4_1_c1_c0 active'
              v-for="(childe,key0) in item.itemVos" :key="key0">
              {{childe.propItemName}}
            </view>
          </view>
        </view>
        <view class='flex align-center justify-between woyaozulin_fd4_2'>
          <text class='woyaozulin_fd4_2_c0'>租赁数量</text>

          <benben-flex-number-box class-name='flex flex align-center' input-class="woyaozulin_numberBoxInputfd4_2_c1"
            :disabled="true" :min="1" :step="1" :opacity="0.3">
            <template #minus>
              <image class='woyaozulin_fd4_2_c1_c0' mode="aspectFit" :src='STATIC_URL+"537.png"'></image>
            </template>
            <template #plus>
              <image class='woyaozulin_fd4_2_c1_c0' mode="aspectFit" :src='STATIC_URL+"517.png"'></image>
            </template>

          </benben-flex-number-box>

        </view>

        <view class='flex align-center justify-center woyaozulin_fd4_4' @click.stop="goPayBuy">
          <view class='flex align-center justify-center woyaozulin_fd4_4_c0'>
            <text class='woyaozulin_fd4_4_c0_c0'>我要买下</text>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->

    </benben-popup>
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},


    data() {
      return {
        "popupShow1657247297312": false,
        "popupShow1708480211541": false,
        "popupShow1709694882158": false,
        "cut": "1",
        "cancel_id": "",
        "dataDetails": {
          "id": "",
          "cid": "",
          "adslogan": "",
          "name": "",
          "sales_sum": "",
          "spectypeid": "",
          "click": "",
          "is_recommend": "",
          "is_new": "",
          "is_hot": "",
          "shop_price": "",
          "member_price": "",
          "market_price": "",
          "images": [],
          "thumb": "",
          "body": "",
          "description": "",
          "stock": "",
          "is_spec": "",
          "is_shipping": "",
          "freight_price": "",
          "support_self_mention": "",
          "freight_template_id": "",
          "partner_id": "",
          "video": "",
          "video_img": "",
          "share_award_money": "",
          "discounts": "",
          "spec_list": [],
          "sku_list": {
            "sku_id": "",
            "key": "",
            "key_name": "",
            "member_price": "",
            "shop_price": "",
            "market_price": "",
            "stock": ""
          },
          "coupon_list": [],
          "activity_info": {
            "activity_type": ""
          },
          "user_level": "",
          "is_collect": "",
          "comment_total": "",
          "praise_rate": "",
          "freight_explain": "",
          "freight_name": "",
          "sale_top_name": "",
          "question_total": "",
          "question_list": [],
          "goods_type": "",
          "chat_price": "",
          "shop_info": {
            "store_id": "",
            "store_name": "",
            "store_logo": "",
            "level_name": "",
            "store_star": "",
            "store_collection_num": ""
          },
          "warm_prompt": "",
          "comment": []
        },
        "dataMessage": [],
        "text": "shenqingchengg",
        "money": 0,
        "daojishi": 86400,
        "order_id": "",
        "order_sn": "",
        "id": "",
        userAdress: '',
        orderRecItems: '',
        popBox: '',
        leaseItemVos: [],
        leaseItemId: '',
        leaseItemName: '',
        leaseItemPrice: 0,
        isgoBuy: false,
        payId: '',
        popupShow1709706165794: false,
        isMore: false
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      }
    },
    watch: {},
    onLoad(options) {
      let {
        order_id,
        order_sn,
        id
      } = options
      if (order_id !== undefined) this.order_id = order_id
      if (order_sn !== undefined) this.order_sn = order_sn
      if (id !== undefined) this.id = id
      this.getDetailliFunc()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      this.isgoBuy = false
      this.popupShow1709706165794 = false
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      chooseMore() {
        this.isMore = !this.isMore
      },
      chooseLease(item) {
        console.log('otem', item)
        this.leaseItemId = item.id
        this.leaseItemName = item.monthNum
        this.leaseItemPrice = parseFloat(this.popBox.rentMoeny * this.leaseItemName).toFixed(2)
      },
      openpop(item) {
        this.popBox = item
        this.getDetail(item)
        console.log('popBox', this.popBox)
      },

      getDetail(item) {

        this.$api.dbGet(global.apiUrls.getCommodDetail, {
          id: item.comdIdk
        }).then(res => {
          if (res.data.code == 0) {
            this.leaseItemVos = res.data.data.leaseItemVos
            this.popupShow1709706165794 = true
          }
        })
      },
      // 买下
      popopen(item) {
        this.payId = item.id
        // 获取买下数据详情
        this.$api.dbGet(global.apiUrls.getBuyData, {
          id: item.id
        }).then(res => {
          if (res.data.code == 0) {
            this.popBox = res.data.data
            this.isgoBuy = true
          }
        })
      },
      // 我要买下
      goPayBuy() {
        uni.navigateTo({
          url: `/pages/sy/offerPay/leaEarlyPay?order_sn=${this.payId}&money=${this.popBox.sumAmount}&time=900&recType=22`
        })
      },
      goPay() {
        if (!this.leaseItemId) {
          this.$message.info('请选择租赁时长')
          return;
        }
        uni.navigateTo({
          url: `/pages/sy/offerPay/offerPay?order_sn=${this.popBox.id}&money=${this.leaseItemPrice}&time=900&recType=22`
        })
      },
      //订单-订单详情
      async getDetailliFunc() {
        //请求方法
        //数据验证

        let datadataDetails = await this.$api.get(global.apiUrls.getAppMeLeaOrderDetail, {
          id: this.order_id
        });

        if (datadataDetails.data.code != 0) {
          this.$message.info(datadataDetails.data.msg);
          return
        }
        let infodataDetails = datadataDetails.data;
        this.dataDetails = infodataDetails.data
        this.userAdress = this.dataDetails.userAdress
        this.orderRecItems = this.dataDetails.orderRecItems[0]
      },

    }
  };
</script>
<style lang="scss" scoped>
  .woyaozulin_fd4_4_c0_c0 {
    color: #FFFFFF;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 45rpx;
  }

  .woyaozulin_fd4_1_c1_c2 {
    background: rgba(246, 246, 246, 1);
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    width: 290rpx;
    height: 54rpx;
    margin: 0rpx 32rpx 32rpx 0rpx;
  }

  .woyaozulin_fd4_1_c1_c1_c0 {
    color: #333;
    font-size: 24rpx;
    font-weight: 700;
    line-height: 33rpx;
  }

  .woyaozulin_fd4_1_c1_c1 {
    background: rgba(246, 246, 246, 1);
    border-radius: 44rpx;
    width: 290rpx;
    height: 54rpx;
    margin: 0rpx 32rpx 32rpx 0rpx;
  }

  .woyaozulin_fd4_1_c1_c0_c0 {
    color: var(--benbenFontColor3);
    font-size: 24rpx;
    font-weight: 700;
    line-height: 33rpx;
  }

  .woyaozulin_fd4_1_c1_c0 {
    background: var(--benbenbgColor5);
    border-radius: 44rpx;
    width: 290rpx;
    height: 54rpx;
    margin: 0rpx 32rpx 32rpx 0rpx;
    color: #333;

    &.active {
      background: var(--benbenbgColor7);
      color: #FFF;
    }
  }

  .woyaozulin_fd4_1_c1 {
    border-bottom: 1px solid #eee;
  }

  .woyaozulin_fd4_1_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 40rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .woyaozulin_fd4_1 {
    margin: 50rpx 0rpx 0rpx 0rpx;
  }

  .woyaozulin_fd4_4_c0 {
    background: var(--benbenbgColor7);
    width: 684rpx;
    height: 88rpx;
    background-size: 100% auto !important;
    border-radius: 44rpx;
  }

  .woyaozulin_fd4_4 {
    margin: 0rpx 0rpx 40rpx 0rpx;
  }

  .woyaozulin_fd4_3 {
    padding: 0rpx 0rpx 32rpx 0rpx;
  }

  .woyaozulin_flex_4 {
    background: #fff;
    background-size: 100% auto !important;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    padding: 0rpx 032rpx 0rpx 32rpx;
    margin: 58rpx 0rpx 0rpx 0rpx;
  }

  .woyaozulin_fd4_2_c1_c0 {
    height: 48rpx;
    margin: 0rpx 4rpx 0rpx 4rpx;
    width: 48rpx;
  }

  ::v-deep .woyaozulin_numberBoxInputfd4_2_c1 {
    background: rgba(255, 255, 255, 0.2);
    width: 80rpx;
    height: 50rpx;
    text-align: center;
    color: #323232;
    font-size: 28rpx;
  }

  .woyaozulin_fd4_2_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 40rpx;
  }

  .woyaozulin_fd4_2 {
    margin: 32rpx 0rpx 39rpx 0rpx;
  }

  .woyaozulin_fd4_0_c0 {
    width: 200rpx;
    height: 200rpx;
    margin: -58rpx 24rpx 0rpx 0rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .woyaozulin_fd4_0_c1_c1_c1 {
    color: #666666;
    font-size: 24rpx;
    line-height: 33rpx;
    font-weight: 400;
  }

  .woyaozulin_fd4_0_c1_c1_c0_c1 {
    margin: 0rpx 0rpx 0rpx 12rpx;
  }

  .woyaozulin_fd4_0_c1_c1_c0 {
    color: #666666;
    font-size: 24rpx;
    line-height: 33rpx;
    font-weight: 400;
    margin: 0rpx 40rpx 0rpx 0rpx;
  }

  .woyaozulin_fd4_0_c1_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .woyaozulin_fd4_0_c1_c0_c1 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .woyaozulin_fd4_0_c1_c0_c0_c2_c1 {
    margin: 0rpx 0rpx 0rpx 6rpx;
  }

  .woyaozulin_fd4_0_c1_c0_c0_c2 {
    font-size: 24rpx;
    margin: 0rpx 0rpx 0rpx 12rpx;
  }

  .woyaozulin_fd4_0_c1_c0_c0_c1_c0 {
    font-size: 30rpx;
  }

  .woyaozulin_fd4_0_c1_c0_c0_c1 {
    color: rgba(218, 55, 44, 1);
    font-size: 40rpx;
    line-height: 53rpx;
    font-weight: 700;
  }

  .woyaozulin_fd4_0_c1_c0_c0_c0 {
    width: 32rpx;
    height: 28rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 18rpx 0rpx 0rpx;
  }

  .woyaozulin_fd4_0_c1 {
    padding: 40rpx 0rpx 0rpx 0rpx;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(image-path('22.png')) no-repeat;
    background-size: 100% auto;
  }

  .zulindetail_flex_0 {
    background: url(image-path('22.png')) no-repeat;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .zulindetail_fd0_0_c2 {
    padding: 0rpx 0rpx 0rpx 0rpx;
    width: 200rpx;
  }

  .zulindetail_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #fff;
  }

  .zulindetail_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #fff;
    font-weight: 500;
  }

  .zulindetail_fd0_0_c0 {
    width: 200rpx;
  }

  .zulindetail_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
  }

  .zulindetail_flex_1 {
    padding: 5rpx 24rpx 32rpx 24rpx;
    margin: 0rpx 0rpx 88rpx 0rpx;
  }

  .zulindetail_fd1_4_c2 {
    background: var(--benbenbgColor7);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    font-size: 24rpx;
    color: #fff;
    width: 170rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-weight: 400;
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .zulindetail_fd1_4_c1 {
    background: var(--benbenbgColor5);
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    font-size: 24rpx;
    color: #333;
    width: 170rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-weight: 400;
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .zulindetail_fd1_4_c0 {
    color: var(--benbenFontColor2);
    font-size: 24rpx;
    position: relative;

    .cancel-box {
      color: #777777;
      font-size: 26rpx;
      width: 157rpx;
      // height: 80rpx;
      background: #FFFFFF;
      // line-height: 80rpx;
      box-shadow: 0px 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
      text-align: center;
      position: absolute;
      top: -200rpx;
      left: -20rpx;

      .cancel-item {
        line-height: 80rpx;
        height: 80rpx;
      }
    }
  }

  .zulindetail_fd1_4 {
    background: var(--benbenbgColor1);
    background-size: 100% auto !important;
    position: fixed;
    bottom: calc(0rpx + var(--window-bottom));
    width: 750rpx;
    height: 88rpx;
    left: 0rpx;
    padding: 0rpx 24rpx 0rpx 24rpx;
  }

  .zulindetail_fd1_3_c2_c0 {
    width: 661rpx;
    height: 338rpx;
    border-radius: 8rpx;
  }

  .zulindetail_fd1_3_c1 {
    font-size: 26rpx;
    color: var(--benbenFontColor0);
    line-height: 45rpx;
    margin: 24rpx 0rpx 24rpx 0rpx;
  }

  .zulindetail_fd1_3_c0_c0 {
    background: var(--benbenbgColor7);
    width: 8rpx;
    height: 30rpx;
    margin: 0rpx 15rpx 0rpx 0rpx;
    transform: scaleX(0.5);
  }

  .zulindetail_fd1_3 {
    background: #fff;
    background-size: 100% auto !important;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 32rpx 24rpx 32rpx 24rpx;
    margin: 12rpx 0rpx 100rpx 0rpx;
  }

  .zulindetail_fd1_2_c1_c4_c2 {
    color: var(--benbenFontColor4);
    margin: 0rpx 0rpx 0rpx 32rpx;
  }

  .zulindetail_fd1_2_c1_c2_c1_c2 {
    color: var(--benbenFontColor4);
  }

  .zulindetail_fd1_2_c1_c2_c1_c1 {
    margin: 0rpx 24rpx 0rpx 24rpx;
  }

  .zulindetail_fd1_2_c1_c2_c1_c0 {
    width: 32rpx;
    height: 28rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .zulindetail_fd1_2_c1_c1_c1 {
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
  }

  .zulindetail_fd1_2_c1_c1_c0 {
    margin: 0rpx 72rpx 0rpx 0rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor0);
    width: 150rpx;
  }

  .zulindetail_fd1_2_c1_c0_c0 {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
  }

  .zulindetail_fd1_2_c1_c0 {
    border-bottom: 1px solid #eee;
    padding-bottom: 24rpx;
  }

  .zulindetail_fd1_2_c1 {
    border-top: 1px solid #eee;
    padding: 32rpx 0rpx 0rpx 0rpx;
  }

  .zulindetail_fd1_2_c0_c1_c1_c2 {
    background: rgba(50, 127, 251, 0.06);
    background-size: 100% auto;
    border-radius: 8rpx;
    width: 300rpx;
    padding: 4rpx 10rpx;
    text-align: center;
  }

  .zulindetail_fd1_2_c0_c1_c1_c1 {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    margin: 8rpx 0rpx auto 0rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 33rpx;
  }

  .zulindetail_fd1_2_c0_c1_c1_c0 {
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 42rpx;
  }

  .zulindetail_fd1_2_c0_c1_c1 {
    margin: 0rpx 0rpx 0rpx 34rpx;
  }

  .zulindetail_fd1_2_c0_c1_c0 {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .zulindetail_fd1_2_c0_c1 {
    margin: 32rpx 0rpx 0rpx 0rpx;
  }

  .zulindetail_fd1_2_c0_c0_c2 {
    font-size: 22rpx;
  }

  .zulindetail_fd1_2_c0_c0_c1 {
    font-size: 32rpx;
    margin: 0rpx 12rpx 0rpx 12rpx;
  }

  .zulindetail_fd1_2_c0_c0_c0 {
    width: 33rpx;
    height: 33rpx;
  }

  .zulindetail_fd1_2_c0 {
    // border-bottom: 1px solid #eee;
    padding: 0rpx 0rpx 32rpx 0rpx;
  }

  .zulindetail_fd1_2 {
    background: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 32rpx 24rpx 32rpx 24rpx;
    background-size: 100% auto !important;
    margin: 12rpx 0rpx 12rpx 0rpx;
  }

  .zulindetail_fd1_1_c2 {
    width: 14rpx;
    height: 26rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .zulindetail_fd1_1_c1_c1_c0_c3 {
    font-size: 24rpx;
    font-weight: 400;
    color: #333333;
  }

  .zulindetail_fd1_1_c1_c1_c0_c0 {
    font-size: 24rpx;
    font-weight: 400;
    color: #333333;
    margin: 0rpx 5rpx 0rpx 0rpx;
  }

  .zulindetail_fd1_1_c1_c1_c0 {
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .zulindetail_fd1_1_c1_c1 {
    margin: 19rpx 0rpx 0rpx 0rpx;
  }

  .zulindetail_fd1_1_c1_c0_c4 {
    font-size: 32rpx;
    font-weight: 700;
    color: #333333;
    margin: 0rpx 0rpx 0rpx 16rpx;
    line-height: 40rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .zulindetail_fd1_1_c1_c0_c1 {
    font-size: 24rpx;
    font-weight: 700;
  }

  .zulindetail_fd1_1_c1_c0_c0 {
    font-size: 32rpx;
    font-weight: 700;
    color: #333333;
    max-width: 200rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 40rpx;
  }

  .zulindetail_fd1_1_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .zulindetail_fd1_1_c0 {
    width: 60rpx;
    height: 60rpx;
  }

  .zulindetail_fd1_1 {
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 32rpx 0rpx 12rpx 0rpx;
    padding: 40rpx 21rpx 40rpx 24rpx;
  }

  .zulindetail_fd1_0_c1_1 {
    width: 140rpx;
    height: 140rpx;
  }

  .zulindetail_fd1_0_c1 {
    width: 80rpx;
    height: 80rpx;
  }

  .zulindetail_fd1_0_c0_c0 {
    font-size: 32rpx;
    font-weight: 700;
    color: #FFFFFF;
  }

  .zulindetail_fd1_0 {
    padding: 12rpx 0rpx 0rpx 0rpx;
  }

  .zulindetail_flex_2 {
    background: #fff;
    background-size: 100% auto !important;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    padding: 40rpx 32rpx 45rpx 32rpx;
  }

  .zulindetail_fd2_1_c0_c1 {
    font-size: 26rpx;
    color: rgba(119, 119, 119, 1);
  }

  .zulindetail_fd2_1_c0_c0 {
    width: 150rpx;
    font-size: 26rpx;
    color: rgba(119, 119, 119, 1);
  }

  .zulindetail_fd2_1_c0 {
    padding: 0rpx 0rpx 32rpx 0rpx;
  }

  .zulindetail_fd2_0_c2 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .zulindetail_fd2_0_c1_c1 {
    line-height: 45rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #333;
    margin: 0rpx 24rpx 0rpx 24rpx;
  }

  .zulindetail_fd2_0_c1_c0 {
    width: 32rpx;
    height: 10rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .zulindetail_fd2_0_c1 {
    position: relative;
  }

  .zulindetail_fd2_0_c0 {
    height: 40rpx;
    width: 40rpx;
  }

  .zulindetail_fd2_0 {
    margin: 0rpx 0rpx 46rpx 0rpx;
  }

  .zulindetail_fd3_0_c2_c1 {
    background: var(--benbenbgColor1);
    font-size: 32rpx;
    color: var(--benbenFontColor5);
    width: 270rpx;
    height: 101rpx;
    line-height: 101rpx;
    font-weight: 500;
  }

  .zulindetail_fd3_0_c2_c0 {
    border-right: 1px solid #eee;
    background: #fff;
    font-size: 32rpx;
    color: rgba(153, 153, 153, 1);
    width: 270rpx;
    height: 101rpx;
    line-height: 101rpx;
    font-weight: 400;
  }

  .zulindetail_fd3_0_c2 {
    border-top: 1px solid #eee;
    margin: 51rpx 0rpx 0rpx 0rpx;
  }

  .zulindetail_fd3_0_c1 {
    line-height: 44rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;
    margin: 32rpx 40rpx 0rpx 40rpx;
  }

  .zulindetail_fd3_0_c0 {
    line-height: 44rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    margin: 40rpx 0rpx 0rpx 0rpx;
  }

  .zulindetail_fd3_0 {
    background: #fff;
    width: 540rpx;
    background-size: 100% auto !important;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .zulindetail_flex_4 {
    background: #fff;
    background-size: 100% auto !important;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }

  .zulindetail_fd4_0_c2_c0_c0_c1 {
    width: 32rpx;
    height: 32rpx;
  }

  .zulindetail_fd4_0_c2_c0_c0 {
    padding: 20rpx 0rpx 20rpx 0rpx;
  }

  .zulindetail_fd4_0_c2 {
    touch-action: none;
    width: 686rpx;
    height: 40vh;
    margin: 0rpx auto 40rpx auto;
  }

  .zulindetail_fd4_0_c1_c0 {
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
    padding: 25rpx 24rpx 25rpx 24rpx;
  }

  .zulindetail_fd4_0_c1 {
    background: #F8F8F8;
  }

  .zulindetail_fd4_0_c0_c2 {
    font-size: 28rpx;
    font-weight: 700;
    color: var(--benbenFontColor5);
    line-height: 40rpx;
  }

  .zulindetail_fd4_0_c0_c1 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
  }

  .zulindetail_fd4_0_c0_c0 {
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
  }

  .zulindetail_fd4_0_c0 {
    padding: 32rpx 32rpx 32rpx 32rpx;
  }

  .zulindetail_fd4_0 {
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }
</style>
